<template>
  <div class="login">
    <div class="card">
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        :label-position="labelPosition"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm myfrom"
      >
        <h1>LOGIN</h1>
        <el-form-item class="my-el-form-item" label="用户名" prop="username">
          <el-input
            type="text"
            clearable
            v-model="ruleForm.username"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item class="my-el-form-item" label="密码" prop="password">
          <el-input
            type="password"
            show-password
            v-model="ruleForm.password"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item label="验证码" prop="code">
          <el-input clearable v-model="ruleForm.code" maxlength="5">
            <template #append>
              <el-button @click="getCaptcha">刷新验证码</el-button></template
            >
          </el-input>
        </el-form-item>

        <el-form-item v-show="showElImage">
          <el-image
            style=" width: 158px;height: 42px;"
            :src="captchaImg"
            class="captchaImg"
            @click="getCaptcha"
          ></el-image>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >登录</el-button
          >

          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
        <el-form-item>
          <router-link
            to="/home"
            class="btn btn-outline-primary"
            style="margin-right:5px;"
            tag="button"
            >回到首页</router-link
          >
          <router-link
            to="/register"
            tag="button"
            class="btn btn-outline-primary"
            >没有账号？请注册</router-link
          >
        </el-form-item>
        <el-form-item> </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import qs from "qs";

export default {
  data() {
    return {
      labelPosition: "top",
      showElImage: false,
      ruleForm: {
        username: "",
        password: "",
        code: "",
        token: "",
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
        code: [
          { required: true, message: "请输入验证码", trigger: "blur" },
          { min: 5, max: 5, message: "长度为 5 个字符", trigger: "blur" },
        ],
      },
      captchaImg: null,
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          const data = await this.$http.post(
            "/login?" + qs.stringify(this.ruleForm)
          );

          if (data.code != 200) {
            this.$refs[formName].resetFields();
            this.$message.error(data.message);
          } else {
            this.$message.success("登录成功！");

            this.$refs[formName].resetFields();

            this.$store.commit("users", data.data); //状态持久化
            this.$router.push("/home");
          }
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    getCaptcha() {
      this.$http.get("/captcha").then((res) => {
        this.ruleForm.token = res.data.token;
        this.captchaImg = res.data.captchaImg;
        this.ruleForm.code = "";
      });

      this.showElImage = true;
    },
  },
  created() {
    this.getCaptcha();
  },
};
</script>

<style lang="less" scoped>
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background: url("~@/assets/imags/login/login.jpg") center center no-repeat;
}
.card {
  width: 25rem;

  background: rgba(255, 255, 255, 0.35);
}

.el-form {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.el-message {
  top: 200px !important;
}

.captchaImg {
  float: left;
  margin-left: 8px;
  border-radius: 4px;
}
h1 {
  letter-spacing: 9px;

  margin-top: 10px;
  color: #0a1b4f;
}
.btn-outline-primary {
  color: #fff !important;
}
.el-input--suffix {
  width: 220px !important;
}
.el-form-item {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.el-form-item__content {
  display: flex !important;
}
</style>
